<template>
  <Modal :show="show" style="align-items: flex-end">
    <div class="wallet-kit-modal-content">
      <div
        :style="{ background: currentStackFrame === 0 ? '#24252a' : '#1a1b1f' }"
      >
        <div style="height: 28px; margin: 14px 14px 16px 14px">
          <ModalHeader
            :style="{
              background: currentStackFrame === 0 ? '#24252a' : '#1a1b1f',
            }"
            :uid="MobileModalConstant?.CONTEXT_UID"
            :stack-frame="currentStackFrame"
            @back="backStack"
            @close="closeModal"
          />
        </div>
      </div>
      <MobileModalContent
        :current-stack-frame="currentStackFrame"
        v-model:wallet="selectWallet"
        @change-step="changeStepModalContent"
        @close-modal="closeModal"
      />
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { inject, ref } from 'vue'
import Modal from './index.vue'
import { useModalContext } from '../../hooks/useModalContext'
import { MobileModalConstant } from '../../constants/ModalContextConstant'
import ModalHeader from '../Modal/ModalHeader.vue'
import { useConnectModal } from '../../hooks/useConnectModal'
import { clearWalletConnectDeepLink } from '../../wallets/walletConnectDeepLink'
import { Config, useAccountEffect } from '@wagmi/vue'
import MobileModalContent from '../Modal/MobileModalContent.vue'
import type { WalletConnector } from '../../wallets/useWalletConnectors'

withDefaults(
  defineProps<{
    show: boolean
  }>(),
  {
    show: false,
  },
)

// 选择的钱包
const selectWallet = ref<WalletConnector>()

const { currentStackFrame, toStack, backStack } = useModalContext({
  uid: MobileModalConstant?.CONTEXT_UID,
})

const { closeConnectModal } = useConnectModal({
  onOpen() {
    initStack()
  },
  onClose() {
    initStack()
  },
})

const changeStepModalContent = ({
  stackFrame,
  modalTitle,
}: {
  stackFrame: number
  modalTitle: string
}) => {
  toStack(stackFrame, {
    title: modalTitle,
  })
}

useAccountEffect({
  onDisconnect: clearWalletConnectDeepLink,
})

const initStack = () => {
  toStack(0, {
    title: 'Connect a Wallet',
    haveBackIcon: false,
  })
}

const closeModal = () => {
  closeConnectModal()
}
</script>

<style lang="scss" scoped>
.wallet-kit-modal-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
  background: #1a1b1f;
  border-radius: 16px 16px 0 0;
  color: #f2f2f2;
}
</style>
